<template>
  <div class="processdetail1">
    <div class="finger" v-show="end">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
  
    <!-- <img src="@/static/processdetail2.jpg" alt=""> -->
    <video @ended="cando" ref="videoplay" :src="videoPath" class="videoPath" controls ></video>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, defineEmits } from 'vue';
const end = ref(false);
const props = defineProps({
  videoPath: {
    type: String,
    required: true
  },

});
const enddd=()=>{

}
const videoplay = ref();

const playbtn = () => {
  videoplay.value.play();
};
const cando = () => {
  videoplay.value.controls=false;
  end.value = true;
  console.log(end.value);
  emits('cando', 1);
}
const emits = defineEmits(['end', 'cando']);
//   const run = () => {
//     setTimeout(() => {
//       emits('end', 1);
//     }, 1000);
//   };

onMounted(() => {
end.value=false
});
</script>
<style lang="scss" scoped>
.finger {
  display: flex;
  position: absolute;
  right: -22rem;
  top: -4rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(180deg);
  }
}

.processdetail1 {
  position: relative;
  background-image: url("@/static/processdetail2.jpg");
  background-size: cover;
  height: 31rem;
  width: 40rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3rem;

  .videoPath {
    z-index: 3;
    height: 100%;
    width: 100%;
  }

  img {
    height: 100%;
    width: 100%;
  }
}
</style>